<template>
  <div class="user-list">
    <el-card>
      <div slot="header">
        <el-form :model="filterParams" ref="filter-form">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="fitlerParams.phone"></el-input>
          </el-form-item>
          <el-form-item label="注册时间" prop="rangeDate">
            <el-date-picker
              v-model="filterParams.rangeDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="loading" @click="handleReset">重置</el-button>
            <el-button :disabled="loading" @click="handleQuery" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="users" style="width: 100%" v-loading="loading">
        <el-table-item prop="id" label="用户id" width="100"> </el-table-item>
        <el-table-item prop="name" label="头像" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.portrait" alt="" />
          </template>
        </el-table-item>
        <el-table-item prop="name" label="用户名" width="100"> </el-table-item>
        <el-table-item prop="phone" label="手机号" width="100"> </el-table-item>
        <el-table-item prop="createTime" label="注册时间" width="100"> </el-table-item>
        <el-table-item label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSelectRole(scope.row)">分配角色</el-button>
          </template>
        </el-table-item>
      </el-table>

      <el-dialog
        title="分配角色"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-select v-model="roleIdList" multiple placeholder="请选择">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAllocRole"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getUserPages, forbidUser } from '@/services/user'
import { getAllRoles, allocateUserRoles, getUseRoles } from '@/services/role'
import { Form } from 'element-ui'
export default Vue.extend({
  name: 'UserList',
  data () {
    return {
      users: [],
      filterParams: {
        currentPage: 1,
        pageSize: 10,
        phone: '',
        startCreateTime: '',
        endCreateTime: '',
        rangeDate: []
      },
      loading: false,
      dialogVisible: false,
      roles: [],
      roleIdList: [],
      currentUser: null
    }
  },
  created () {
    this.loadUsers()
  },
  methods: {
    async loadUsers () {
      this.loading = true
      const { rangeDate } = this.filterParams
      if (rangeDate && rangeDate.length) {
        [this.filterParams.startCreateTime, this.filterParams.endCreateTime] = rangeDate
      } else {
        [this.filterParams.startCreateTime, this.filterParams.endCreateTime] = ['', '']
      }
      const { data } = await getUserPages(this.filterParams)
      this.users = data.data.records
      this.loading = false
    },
    async handleForbidUser (user: any) {
      const { data } = await forbidUser(user.id)
      console.log(data)
    },
    handleQuery () {
      this.filterParams.currentPage = 1
      this.loadUsers()
    },
    handleReset () {
      (this.$refs['filter-form'] as Form).resetFields()
      this.loadUsers()
    },
    async handleSelectRole (role: any) {
      this.currentUser = role
      this.dialogVisible = true
      const { data } = await getAllRoles()
      this.roles = data.data

      const { data: { data: userRoles } } = await getUseRoles((this.currentUser as any).id)
      this.roleIdList = userRoles.map((item: any) => item.id)
    },
    async handleAllocaRole () {
      this.dialogVisible = false
      const { data } = await allocateUserRoles({
        userId: (this.currentUser as any).id,
        roleList: this.roleIdList
      })
      this.$message.success('操作成功')
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
